<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        header,.container,footer{
            height: 1000px;
            /* opacity: 0.7; */
            /*
            使用了 position 属性值为 absolute、relative 的层，将会比普通层更高层次。
            使用了小于1的 opacity 属性的层，也比普通层更高层次并且和指定 position 的层同层，
            但是不支持 z-index 属性，所以指定 position 的层，可以使用 z-index 属性，来覆盖带有小于1的 opacity 属性的层 
             */
        }
        .pink{
            background-color: lightpink;
        }
        .green{
            background-color: lightgreen;
        }
        .blue{
            background-color: lightblue;
        }
        .nav{
            position: fixed;
            top: 50px;
            left: 100px;
            border: 10px #fff solid;
            /* z-index: 30; */
        }
        .nav div{
            float: left;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="pink"></div>
        <div class="green"></div>
        <div class="blue"></div>
    </div>
    <header class="pink"></header>
    <div class="container green"></div>
    <footer class="blue"></footer>

    <script>
        var nav = document.querySelector('.nav');
        var container = document.querySelector('.container');
        var footer = document.querySelector('footer');

        nav.onclick = function () {
            var target = event.target;
            var targetY;
            if (target.classList.contains('pink')) {
                targetY = 0
            } else if (target.classList.contains('green')) {
                targetY = container.offsetHeight;
            } else if (target.classList.contains('blue')) {
                targetY = footer.offsetTop
            }
            move(targetY);
        }

        // function move(targetY) {
        //     window.scroll({
        //         top: targetY,
        //         behavior: 'smooth'
        //     })
        // }

        // 计时器写法
        function move(targetY) {
            var html = document.documentElement;
            // 有定时器，关掉
            if (html.timer) {
                clearInterval(html.timer)
            }
            // 目标位置与实际为准相等 直接返回
            if (html.scrollTop === targetY) {
                return
            }
            html.timer = setInterval(function () {
                var scrollTop = html.scrollTop;
                var step = (targetY-scrollTop)/10;
                // 判断步长是否小于1
                if (Math.abs(step) < 1) {
                    step = targetY > scrollTop ? 1 : -1;
                }

                html.scrollTop = scrollTop + step;
                // 停止条件
                if (html.scrollTop === targetY) {
                    clearInterval(html.timer);
                    html.timer = null;
                }
            }, 1000/60);
        }
    </script>
</body>
</html>